<style  lang="less" scoped>
.Page1{
  width: 100%;
  height: 100%;
  color:#fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  .headerBox{
    width: 100%;
    border-bottom: 2px solid #fff;
    position: relative;
    & > h1{
      font-size: 1.8rem;
      font-family: '宋体';
      font-weight: bold;
      text-align: center;
    }
    .headerRightBtnGroup{
      display: flex;
      align-items: center;
      align-self: flex-end;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translate(0, -50%);
    }
    .headerLeftBtnGroup{
      display: flex;
      align-items: center;
      align-self: flex-end;
      position: absolute;
      top: 50%;
      left: 1%;
      transform: translate(0, -50%);
      .block{
        margin-left: 2rem;
      }
    }
  }
  .wrapper{
    flex:1;
    overflow: auto;
    padding: 0 0px;
    box-sizing: border-box;
    .ctn{
      min-width: 1800px;
      height: 1100px;
      #svgDom{
        width: 100%;
        height: 100%;
      }
    }
  }
}
/deep/ .el-form-item__label {
  color: #fff; /* 自定义 label 的颜色 */
}

/* 调整 el-input 的 placeholder 颜色 */
/deep/ .el-input__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
  opacity: 1;
}

/* 调整 el-select 的 placeholder 颜色 */
/deep/ .el-select .el-input__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
}
/deep/ .el-textarea__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
  opacity: 1; /* 确保颜色生效 */
}

// 遥控弹框样式
/deep/ .yaokongDialog, /deep/ .operateRecordDialog{
  background: rgba(2, 22, 42, 1);
  max-height: 70%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 10px;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 操作人弹框样式
    .operatorPwd{
      & > div + div{
        margin-top: 10px;
      }
      & > div{
        display: flex;
        align-items: center;
        & > label{
          font-size: 14px;
          width: 80px;
        }
        .el-input{
          flex:1;
          overflow: hidden;
        }
      }
    }

    // 消息告警输入框
    .messageAlarmList{
      flex:1;
      overflow: auto;
      .el-table{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background:transparent;
        &:before{
          height: 0;
        }
        .el-table__header-wrapper{
          overflow: initial;
        }
        .el-table__body-wrapper{
          flex:1;
          overflow: auto;
        }
      }
      .el-table th{
        background:#142e48;
      }
      .el-table tr{
        background: transparent;
      }
      .el-table td, .el-table th{
        border: 1px solid #313338;
        border-left: 0;
        border-right: 0;
        color: #dee2e5;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #3a6378;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}

// 遥控弹框 - 操作人账号密码 - 样式
/deep/ .yaokongPersonDialog{
  background: rgba(2, 22, 42, 1);
  max-height: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 10px;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 操作人弹框样式
    .operatorPwd{
      & > div + div{
        margin-top: 10px;
      }
      & > div{
        display: flex;
        align-items: center;
        & > label{
          font-size: 14px;
          width: 80px;
          color: #dee2e5;
        }
        .el-input{
          flex:1;
          overflow: hidden;
        }
      }
    }

    // 消息告警输入框
    .messageAlarmList{
      flex:1;
      overflow: hidden;
      .el-table{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background:transparent;
        &:before{
          height: 0;
        }
        .el-table__header-wrapper{
          overflow: initial;
        }
        .el-table__body-wrapper{
          flex:1;
          overflow: auto;
        }
      }
      .el-table th{
        background:#142e48;
      }
      .el-table tr{
        background: transparent;
      }
      .el-table td, .el-table th{
        border: 1px solid #313338;
        border-left: 0;
        border-right: 0;
        color: #dee2e5;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #3a6378;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}

// 汇报调度弹框样式
/deep/ .reportSchedulingDialog{
  background: rgba(2, 22, 42, 1);
  max-height: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 0;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 汇报调度输入框
    .reportSchedulingTextArea{
      flex:1;
      overflow: hidden;
      // .el-textarea{
      // 	height: 100%;
      // }
      .el-textarea__inner{
        height: 100%;
        color:#dee2e5;
        background:transparent;
        border: 1px solid #666;
        font-size: 16px;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    text-align: center;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}
/deep/ .operateRecordDialog {
  pointer-events: auto;
  margin-right: 34%;
}
.is-highlight {
  animation: highlight 1s;
}
@keyframes highlight {
  0% {
    color: yellow;
  }
  100% {
    color: #FFFFFF;
  }
}
.brandBtn{
  animation: flash 1s infinite;
}
@keyframes flash {
  0%, 100% {
    opacity: 1; /* 完全不透明 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}
.brandMsgTitle{
  font-size: 2rem;
  color: white;
}
.brandMsgP{
  font-size: 1.5rem;
  //空两个字
  margin: 2rem;
}
/deep/ .el-dialog__body{
  overflow: scroll;
}
.fault-dialog-content {
  padding: 20px;
  color: #fff;
}

/* 覆盖 Element UI 的默认样式 */
:deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.6);
}


:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-collapse-item__header) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-collapse-item__content) {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-checkbox__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-radio__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-input-number__decrease:hover),
:deep(.el-input-number__increase:hover) {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-input__inner) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
:deep(.is-disabled .el-input__inner){
  background-color: #131f2a;
  border-color: rgba(255, 255, 255, 0.2);
  color: #999;
}
:deep(.el-input__inner:hover),
:deep(.el-input__inner:focus) {
  border-color: #409EFF;
}

:deep(.el-select-dropdown__item) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-select-dropdown__item.hover) {
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-select-dropdown__item.selected) {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-slider__runway) {
  background-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-slider__bar) {
  background-color: #409EFF;
}

:deep(.el-slider__button) {
  border-color: #409EFF;
  background-color: #409EFF;
}

:deep(.el-collapse) {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: transparent;
}

.distance-slider {
  width: 300px;
}

.ms-label {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.8);
}

.el-collapse {
  margin: 10px 0;
  border-color: rgba(255, 255, 255, 0.1);
}

/* 修复下拉菜单的背景色 */
:deep(.el-select-dropdown) {
  background-color: rgb(2, 22, 42);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 修复弹出层的背景色 */
:deep(.el-popper[x-placement^="bottom"]) {
  background-color: rgb(2, 22, 42);
}

/* 修改折叠面板的样式 */
:deep(.el-collapse) {
  border: none;
  background-color: transparent;
}

:deep(.el-collapse-item) {
  margin-bottom: 1px;
}

:deep(.el-collapse-item__header) {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
}

:deep(.el-collapse-item__header:hover) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-collapse-item__content) {
  background-color: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 15px;
}

:deep(.el-collapse-item__arrow) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-collapse-item__header.is-active) {
  border-bottom-color: transparent;
}

:deep(.el-collapse-item__wrap) {
  border: none;
  background-color: transparent;
}

/* 添加新的样式 */
.fault-list {
  margin-top: 20px;
}

:deep(.el-table) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgb(28, 46, 64);
}

:deep(.el-table::before) {
  display: none;
}

:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-bottom: 1px solid rgb(28, 46, 64);
}

:deep(.el-table--border th),
:deep(.el-table--border td) {
  border-right: 1px solid rgb(28, 46, 64);
}

:deep(.el-table thead) {
  border-bottom: 1px solid rgb(28, 46, 64);
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(2, 22, 42) !important;
}

.cancel-fault-buttons {
  display: flex;
  gap: 10px;
}

:deep(.el-textarea__inner) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

:deep(.el-textarea__inner:focus) {
  border-color: #409EFF;
}

:deep(.el-table__empty-block) {
  background-color: transparent;
}

:deep(.el-table__empty-text) {
  color: rgba(255, 255, 255, 0.6);
}
.messageAlarmList {
  overflow: hidden;  /* 隐藏溢出内容 */
}
.messageAlarmList {
  scrollbar-width: none; /* 隐藏滚动条 */
}
.messageAlarmList::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.Page1:active {
  cursor: grabbing;
}
</style>
<template xmlns="">
  <div class="Page1" v-if="pageData" @contextmenu.r.prevent>
    <div class="headerBox">
      <div class="headerLeftBtnGroup">
        <div class="block">
          <el-cascader
            v-model="jiaoAnValue"
            :options="jiaoAnOptions_1"
            placeholder="教案"
            style="width: 7rem;"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"
          ></el-cascader>
        </div>
        <div class="block">
          <el-cascader
            v-model="gongkuangValue"
            placeholder="工况"
            style="width: 7rem"
            :options="gongKuangOptions"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"></el-cascader>
        </div>
      </div>
      <h1 style="color: #fff;margin-left: -10%">110kV荷园变主接线图</h1>
      <div class="headerRightBtnGroup">
        <el-button @click="clearAll">全站清闪</el-button>
        <el-button @click="goMap">画面索引</el-button>
        <el-button @click="alertLog">告警记录</el-button>
        <el-button @click="operationRecords">操作记录</el-button>
      </div>
    </div>
    <div class="wrapper" ref="page" @mousedown="startDrag">
      <div class="ctn">
          <svg id="svgDom">
              <g transform="translate(0,0)">
<!--                110kv Ⅲ段母线-->
                  <g>
                      <main-bus name="110kV Ⅲ段母线" x1="270" y1="287" x2="860" y2="287" stateDesc="110kV Ⅲ段母线"  color="rgb(240,65,85)" :isMainPage="true"></main-bus>
                      <g transform="translate(640,280)">
                          <num-screen
                                  name="110kV Ⅲ段母线"
                                  dir="left"
                                  :Ua="Number(this.pageData['110ⅢM'][5].state_val)"
                                  :Ub="Number(this.pageData['110ⅢM'][6].state_val)"
                                  :Uc="Number(this.pageData['110ⅢM'][7].state_val)"
                                  :Uab="Number(this.pageData['110ⅢM'][4].state_val)"
                                  :num-tran-y="-90"
                                  :text-width="100"
                                  :num-tran-x="-40"
                                  :is-mother="true"
                          ></num-screen>
                      </g>
<!--                      古荷线-->
                      <g>
                          <g transform="translate(250,0)">
                              <num-screen
                                      name="古荷线"
                                      dir="left"
                                      :P="Number(this.pageData['139'][7].state_val)"
                                      :Q="Number(this.pageData['139'][8].state_val)"
                                      :Ia="Number(this.pageData['139'][6].state_val)"
                                      :Ux="Number(this.pageData['139'][9].state_val)"
                                      :num-tran-y="150"
                                      :text-width="100"
                                      :num-tran-x="230"
                              ></num-screen>
                          </g>
                          <polygon points="435,60,440,50,445,60" fill="rgb(240,65,85)" stroke="rgb(240,65,85)" stroke-width="1"></polygon>
                          <line x1="440" y1="60" x2="440" y2="120" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <bi-lei-qi color="rgb(240,65,85)" :translate-x="570" :translate-y="170" :rotate="180"></bi-lei-qi>
                          <two-circle color="rgb(240,65,85)" :translate-x="570" :translate-y="185" :rotate="180"></two-circle>
                          <polyline points="440,105,470,105,470,120" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <line x1="440" y1="150" x2="440" y2="180" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <polyline points="440,165,410,165,410,150" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <line x1="440" y1="204" x2="440" y2="234" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <line x1="440" y1="262" x2="440" y2="282" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <line x1="440" y1="282" x2="440" y2="312" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <circle  cx="440" cy="287" r="5" fill="rgb(240,65,85)"></circle>
                          <polyline points="440,219,470,219,470,234" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <terminal-svg
                                  :state="Number(pageData[139][4].state_val)"
                                  :stateDesc="pageData[139][4].state_desc"
                                  :name="'-'+pageData[139][4].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="487"
                                  :translate-y="166"
                                  :text-translate-y="16"
                                  :text-translate-x="80"
                                  :rotate="180"
                          ></terminal-svg>
                          <connect-line
                                  :state="Number(pageData['139'][2].state_val)"
                                  :stateDesc="pageData['139'][2].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="416"
                                  :translate-y="148"
                                  :text-translate-y="10"
                                  :text-translate-x="40"
                                  :name="'-'+pageData['139'][2].state_desc.split('-')[1]"></connect-line>
                          <terminal-svg
                                  :state="Number(pageData[139][5].state_val)"
                                  :stateDesc="pageData[139][5].state_desc"
                                  :name="'-'+pageData[139][5].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="392"
                                  :translate-y="102"
                                  :text-translate-y="26"
                                  :text-translate-x="-30"
                                  :rotate="0"
                          ></terminal-svg>
                          <rect-svg
                                  :state="Number(pageData[139][0].state_val)"
                                  :stateDesc="pageData[139][0].state_desc"
                                  :rotate="90"
                                  :translate-y="178"
                                  :translate-x="468"
                                  :text-translate-x="10"
                                  :text-translate-y="-6"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[139][0].is_clear}"
                                  :name="pageData[139][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                                  :state="Number(pageData[139][3].state_val)"
                                  :stateDesc="pageData[139][3].state_desc"
                                  :name="'-'+pageData[139][3].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="487"
                                  :translate-y="280"
                                  :text-translate-y="16"
                                  :text-translate-x="80"
                                  :rotate="180"
                          ></terminal-svg>
                          <connect-line
                                  :state="Number(pageData['139'][1].state_val)"
                                  :stateDesc="pageData['139'][1].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="416"
                                  :translate-y="260"
                                  :text-translate-y="10"
                                  :text-translate-x="40"
                                  :name="'-'+pageData['139'][1].state_desc.split('-')[1]"></connect-line>
                      </g>
<!--                      113-->
                      <g>
                          <g transform="translate(120,380)">
                              <num-screen
                                      name="3#变"
                                      dir="none"
                                      :num-tran-y="150"
                                      :text-width="60"
                                      :num-tran-x="230"
                              ></num-screen>
                          </g>
                          <line x1="440" y1="344" x2="440" y2="374" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <polyline points="440,359,410,359,410,345" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <connect-line
                                  :state="Number(pageData['3zb'][0].state_val)"
                                  :stateDesc="pageData['3zb'][0].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="416"
                                  :translate-y="340"
                                  :text-translate-y="10"
                                  :text-translate-x="45"
                                  :name="pageData['3zb'][0].state_desc"></connect-line>
                          <terminal-svg
                                  :state="Number(pageData['3zb'][2].state_val)"
                                  :stateDesc="pageData['3zb'][2].state_desc"
                                  :name="pageData['3zb'][2].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="392"
                                  :translate-y="297"
                                  :text-translate-y="26"
                                  :text-translate-x="-60"
                                  :rotate="0"
                          ></terminal-svg>
                          <zhanyongbian    :scale=1
                                           :translate-x="2280"
                                           :translate-y="806"
                                           :rotate="180"
                                           :color_1="'rgb(0,210,0)'"
                                           color="rgb(240,65,85)"></zhanyongbian>
                          <polyline points="440,386,340,386,340,401" fill="none" stroke="rgb(240,65,85)" stroke-width="2"></polyline>
                          <terminal-svg
                                  :state="Number(pageData['3zb'][1].state_val)"
                                  :stateDesc="pageData['3zb'][1].state_desc"
                                  :name="pageData['3zb'][1].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="358"
                                  :translate-y="447"
                                  :text-translate-y="46"
                                  :text-translate-x="46"
                                  :rotate="180"
                          ></terminal-svg>
                          <two-triangle color="rgb(240,65,85)" :translate-x="486" :translate-y="257" :rotate="90"></two-triangle>
                      </g>
<!--                      13-7-->
                      <g>
                          <g transform="translate(-175,120)">
                              <text x="650" y="277" style="fill: #fff;font-size: 14px;font-weight: normal">档位</text>
                              <text x="650" y="297" style="fill: #fff;font-size: 14px;font-weight: normal">温度1</text>
                              <text x="650" y="317" style="fill: #fff;font-size: 14px;font-weight: normal">温度2</text>

                              <text x="710" y="277" style="fill: yellow;font-size: 14px;font-weight: normal">{{Number(pageData['3zb'][5].state_val).toFixed(2)}}</text>
                              <text x="710" y="297" style="fill: rgb(120, 232, 70);font-size: 14px;font-weight: normal">{{Number(pageData['3zb'][3].state_val).toFixed(2)}}</text>
                              <text x="710" y="317" style="fill: rgb(120, 232, 70);font-size: 14px;font-weight: normal">{{Number(pageData['3zb'][4].state_val).toFixed(2)}}</text>
                          </g>
                          <circle r="4" cx="650" cy="287" fill="rgb(240,65,85)" stroke="rgb(240,65,85)" stroke-width="2"></circle>
                          <line x1="650" y1="287" x2="650" y2="322" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <polyline points="650,312,690,312,690,322" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <terminal-svg
                                  :state="Number(pageData['110ⅢM'][1].state_val)"
                                  :stateDesc="pageData['110ⅢM'][1].state_desc"
                                  :name="pageData['110ⅢM'][1].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="708"
                                  :translate-y="367"
                                  :text-translate-y="16"
                                  :text-translate-x="76"
                                  :rotate="180"
                          ></terminal-svg>
                          <connect-line
                                  :state="Number(pageData['110ⅢM'][0].state_val)"
                                  :stateDesc="pageData['110ⅢM'][0].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="626"
                                  :translate-y="350"
                                  :text-translate-y="10"
                                  :text-translate-x="45"
                                  :name="pageData['110ⅢM'][0].state_desc"></connect-line>
                          <polyline points="650,354,650,374,610,374,610,354" fill="none" stroke="rgb(240,65,85)" stroke-width="2"></polyline>
                          <terminal-svg
                                  :state="Number(pageData['110ⅢM'][2].state_val)"
                                  :stateDesc="pageData['110ⅢM'][2].state_desc"
                                  :name="pageData['110ⅢM'][2].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="592"
                                  :translate-y="307"
                                  :text-translate-y="-6"
                                  :text-translate-x="-6"
                                  :rotate="0"
                          ></terminal-svg>
                          <dian-liu-hu-gan-qi color="rgb(240,65,85)" :translate-x="750" :translate-y="245" :rotate="90" :s-width="2"></dian-liu-hu-gan-qi>
                          <g transform="translate(520,380)">
                              <num-screen
                                      name="#3PT"
                                      dir="none"
                                      :num-tran-y="150"
                                      :text-width="60"
                                      :num-tran-x="230"
                              ></num-screen>
                          </g>
                      </g>
<!--                      102分段-->
                      <g>
                          <circle r="4" cx="830" cy="287" fill="rgb(240,65,85)" stroke="rgb(240,65,85)" stroke-width="2"></circle>
                          <line x1="830" y1="287" x2="830" y2="267" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <line x1="1030" y1="287" x2="1030" y2="267" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <circle r="4" cx="1030" cy="287" fill="rgb(240,65,85)" stroke="rgb(240,65,85)" stroke-width="2"></circle>
                          <connect-line
                                  :state="Number(pageData['102'][2].state_val)"
                                  :stateDesc="pageData['102'][2].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="806"
                                  :translate-y="262"
                                  :text-translate-y="10"
                                  :text-translate-x="45"
                                  :name="'-'+pageData['102'][2].state_desc.split('-')[1]"></connect-line>
                          <polyline points="830,234,830,157,1030,157,1030,234" fill="none" stroke="rgb(240,65,85)" stroke-width="2"></polyline>
                          <line x1="830" y1="214" x2="810" y2="214" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <line x1="1030" y1="214" x2="1010" y2="214" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <terminal-svg
                                  :state="Number(pageData['102'][4].state_val)"
                                  :stateDesc="pageData['102'][4].state_desc"
                                  :name="'-'+pageData['102'][4].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="763"
                                  :translate-y="231"
                                  :text-translate-y="-6"
                                  :text-translate-x="50"
                                  :rotate="-90"
                          ></terminal-svg>
                          <rect-svg
                                  :state="Number(pageData[102][0].state_val)"
                                  :stateDesc="pageData[102][0].state_desc"
                                  :rotate="90"
                                  :translate-y="168"
                                  :translate-x="859"
                                  :text-translate-x="10"
                                  :text-translate-y="-6"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[102][0].is_clear}"
                                  :name="pageData[102][0].state_desc"
                          ></rect-svg>
                          <g transform="translate(760,100)">
                              <num-screen
                                      name="102分段"
                                      dir="bottom"
                                      :Ia="(Number(pageData[102][5].state_val))"
                                      :num-tran-y="-30"
                                      :text-width="60"
                                      :num-tran-x="0"
                              ></num-screen>
                          </g>
                          <terminal-svg
                                  :state="Number(pageData['102'][3].state_val)"
                                  :stateDesc="pageData['102'][3].state_desc"
                                  :name="'-'+pageData['102'][3].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="963"
                                  :translate-y="231"
                                  :text-translate-y="-6"
                                  :text-translate-x="50"
                                  :rotate="-90"
                          ></terminal-svg>
                          <connect-line
                                  :state="Number(pageData['102'][1].state_val)"
                                  :stateDesc="pageData['102'][1].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="1006"
                                  :translate-y="262"
                                  :text-translate-y="10"
                                  :text-translate-x="5"
                                  :name="'-'+pageData['102'][1].state_desc.split('-')[1]"></connect-line>
                      </g>
                  </g>

                  <!--                110kv II段母线-->
                  <g transform="translate(730,0)">
                      <main-bus name="110kV ii段母线" x1="270" y1="287" x2="860" y2="287" stateDesc="110kV ii段母线"  color="rgb(240,65,85)" :isMainPage="true"></main-bus>
                      <g transform="translate(640,280)">
                          <num-screen
                                  name="110kV Ⅱ段母线"
                                  dir="left"
                                  :Ua="Number(this.pageData['110ⅡM'][5].state_val)"
                                  :Ub="Number(this.pageData['110ⅡM'][6].state_val)"
                                  :Uc="Number(this.pageData['110ⅡM'][7].state_val)"
                                  :Uab="Number(this.pageData['110ⅡM'][4].state_val)"
                                  :num-tran-y="-90"
                                  :text-width="100"
                                  :num-tran-x="-40"
                                  :is-mother="true"
                          ></num-screen>
                      </g>
                      <!--                      兆柳荷园T接线-->
                      <g>
                          <g transform="translate(250,0)">
                              <num-screen
                                      name="兆柳荷园T接线"
                                      dir="left"
                                      :P="Number(this.pageData['138'][7].state_val)"
                                      :Q="Number(this.pageData['138'][8].state_val)"
                                      :Ia="Number(this.pageData['138'][6].state_val)"
                                      :Ux="Number(this.pageData['138'][9].state_val)"
                                      :num-tran-y="150"
                                      :text-width="100"
                                      :num-tran-x="230"
                              ></num-screen>
                          </g>
                          <polygon points="435,60,440,50,445,60" fill="rgb(240,65,85)" stroke="rgb(240,65,85)" stroke-width="1"></polygon>
                          <line x1="440" y1="60" x2="440" y2="120" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <bi-lei-qi color="rgb(240,65,85)" :translate-x="570" :translate-y="170" :rotate="180"></bi-lei-qi>
                          <two-circle color="rgb(240,65,85)" :translate-x="570" :translate-y="185" :rotate="180"></two-circle>
                          <polyline points="440,105,470,105,470,120" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <line x1="440" y1="150" x2="440" y2="180" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <polyline points="440,165,410,165,410,150" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <line x1="440" y1="204" x2="440" y2="234" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <line x1="440" y1="262" x2="440" y2="282" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <line x1="440" y1="282" x2="440" y2="312" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <circle  cx="440" cy="287" r="5" fill="rgb(240,65,85)"></circle>
                          <polyline points="440,219,470,219,470,234" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <terminal-svg
                                  :state="Number(pageData[138][4].state_val)"
                                  :stateDesc="pageData[138][4].state_desc"
                                  :name="'-'+pageData[138][4].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="487"
                                  :translate-y="166"
                                  :text-translate-y="16"
                                  :text-translate-x="80"
                                  :rotate="180"
                          ></terminal-svg>
                          <connect-line
                                  :state="Number(pageData['138'][2].state_val)"
                                  :stateDesc="pageData['138'][2].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="416"
                                  :translate-y="148"
                                  :text-translate-y="10"
                                  :text-translate-x="40"
                                  :name="'-'+pageData['138'][2].state_desc.split('-')[1]"></connect-line>
                          <terminal-svg
                                  :state="Number(pageData[138][5].state_val)"
                                  :stateDesc="pageData[138][5].state_desc"
                                  :name="'-'+pageData[138][5].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="392"
                                  :translate-y="102"
                                  :text-translate-y="26"
                                  :text-translate-x="-30"
                                  :rotate="0"
                          ></terminal-svg>
                          <rect-svg
                                  :state="Number(pageData[138][0].state_val)"
                                  :stateDesc="pageData[138][0].state_desc"
                                  :rotate="90"
                                  :translate-y="178"
                                  :translate-x="468"
                                  :text-translate-x="10"
                                  :text-translate-y="-6"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[138][0].is_clear}"
                                  :name="pageData[138][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                                  :state="Number(pageData[138][3].state_val)"
                                  :stateDesc="pageData[138][3].state_desc"
                                  :name="'-'+pageData[138][3].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="487"
                                  :translate-y="280"
                                  :text-translate-y="16"
                                  :text-translate-x="80"
                                  :rotate="180"
                          ></terminal-svg>
                          <connect-line
                                  :state="Number(pageData['138'][1].state_val)"
                                  :stateDesc="pageData['138'][1].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="416"
                                  :translate-y="260"
                                  :text-translate-y="10"
                                  :text-translate-x="40"
                                  :name="'-'+pageData['138'][1].state_desc.split('-')[1]"></connect-line>
                      </g>
                      <!--                      112-->
                      <g>
                          <g transform="translate(120,380)">
                              <num-screen
                                      name="2#变"
                                      ft-code="2#变"
                                      dir="none"
                                      :num-tran-y="150"
                                      :text-width="60"
                                      :num-tran-x="230"
                              ></num-screen>
                          </g>
                          <line x1="440" y1="344" x2="440" y2="374" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <polyline points="440,359,410,359,410,345" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <connect-line
                                  :state="Number(pageData['2zb'][0].state_val)"
                                  :stateDesc="pageData['2zb'][0].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="416"
                                  :translate-y="340"
                                  :text-translate-y="10"
                                  :text-translate-x="45"
                                  :name="pageData['2zb'][0].state_desc"></connect-line>
                          <terminal-svg
                                  :state="Number(pageData['2zb'][2].state_val)"
                                  :stateDesc="pageData['2zb'][2].state_desc"
                                  :name="pageData['2zb'][2].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="392"
                                  :translate-y="297"
                                  :text-translate-y="26"
                                  :text-translate-x="-60"
                                  :rotate="0"
                          ></terminal-svg>
                          <zhanyongbian    :scale=1
                                           :translate-x="2280"
                                           :translate-y="806"
                                           :rotate="180"
                                           :color_1="'rgb(0,210,0)'"
                                           color="rgb(240,65,85)"></zhanyongbian>
                          <polyline points="440,386,340,386,340,401" fill="none" stroke="rgb(240,65,85)" stroke-width="2"></polyline>
                          <terminal-svg
                                  :state="Number(pageData['2zb'][1].state_val)"
                                  :stateDesc="pageData['2zb'][1].state_desc"
                                  :name="pageData['2zb'][1].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="358"
                                  :translate-y="447"
                                  :text-translate-y="46"
                                  :text-translate-x="46"
                                  :rotate="180"
                          ></terminal-svg>
                          <two-triangle color="rgb(240,65,85)" :translate-x="486" :translate-y="257" :rotate="90"></two-triangle>
                      </g>
                      <!--                      12-7-->
                      <g>
                          <g transform="translate(-175,120)">
                              <text x="650" y="277" style="fill: #fff;font-size: 14px;font-weight: normal">档位</text>
                              <text x="650" y="297" style="fill: #fff;font-size: 14px;font-weight: normal">温度1</text>
                              <text x="650" y="317" style="fill: #fff;font-size: 14px;font-weight: normal">温度2</text>

                              <text x="710" y="277" style="fill: yellow;font-size: 14px;font-weight: normal">{{Number(pageData['2zb'][6].state_val).toFixed(2)}}</text>
                              <text x="710" y="297" style="fill: rgb(120, 232, 70);font-size: 14px;font-weight: normal">{{Number(pageData['2zb'][4].state_val).toFixed(2)}}</text>
                              <text x="710" y="317" style="fill: rgb(120, 232, 70);font-size: 14px;font-weight: normal">{{Number(pageData['2zb'][5].state_val).toFixed(2)}}</text>
                          </g>
                          <circle r="4" cx="650" cy="287" fill="rgb(240,65,85)" stroke="rgb(240,65,85)" stroke-width="2"></circle>
                          <line x1="650" y1="287" x2="650" y2="322" stroke="rgb(240,65,85)" stroke-width="2"></line>
                          <polyline points="650,312,690,312,690,322" stroke="rgb(240,65,85)" stroke-width="2" fill="none"></polyline>
                          <terminal-svg
                                  :state="Number(pageData['110ⅡM'][1].state_val)"
                                  :stateDesc="pageData['110ⅡM'][1].state_desc"
                                  :name="pageData['110ⅡM'][1].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="708"
                                  :translate-y="367"
                                  :text-translate-y="16"
                                  :text-translate-x="76"
                                  :rotate="180"
                          ></terminal-svg>
                          <connect-line
                                  :state="Number(pageData['110ⅡM'][0].state_val)"
                                  :stateDesc="pageData['110ⅡM'][0].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="626"
                                  :translate-y="350"
                                  :text-translate-y="10"
                                  :text-translate-x="45"
                                  :name="pageData['110ⅡM'][0].state_desc"></connect-line>
                          <polyline points="650,354,650,374,610,374,610,354" fill="none" stroke="rgb(240,65,85)" stroke-width="2"></polyline>
                          <terminal-svg
                                  :state="Number(pageData['110ⅡM'][2].state_val)"
                                  :stateDesc="pageData['110ⅡM'][2].state_desc"
                                  :name="pageData['110ⅡM'][2].state_desc"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="592"
                                  :translate-y="307"
                                  :text-translate-y="-6"
                                  :text-translate-x="-6"
                                  :rotate="0"
                          ></terminal-svg>
                          <dian-liu-hu-gan-qi color="rgb(240,65,85)" :translate-x="750" :translate-y="245" :rotate="90" :s-width="2"></dian-liu-hu-gan-qi>
                          <g transform="translate(520,380)">
                              <num-screen
                                      name="#2PT"
                                      dir="none"
                                      :num-tran-y="150"
                                      :text-width="60"
                                      :num-tran-x="230"
                              ></num-screen>
                          </g>
                      </g>
                  </g>
<!--                    10kv-->
                  <g transform="translate(-50,0)">
                      <!--                    10kv母线部分-->
                      <g>
                          <main-bus x1="170" y1="790" x2="930" y2="790"   color="rgb(0,210,0)" :isMainPage="true"></main-bus>
                          <main-bus x1="970" y1="790" x2="1380" y2="790"   color="rgb(0,210,0)" :isMainPage="true"></main-bus>
                          <main-bus x1="1830" y1="790" x2="1420" y2="790"   color="rgb(0,210,0)" :isMainPage="true"></main-bus>
                          <polyline points="350,600,350,500,492,500,492,425" fill="none" stroke="rgb(0,210,0)" stroke-width="2"></polyline>
                          <polyline points="1401,500,1220,500,1220,425" fill="none" stroke="rgb(0,210,0)" stroke-width="2"></polyline>
                          <polyline points="1360,790,1360,820,1440,820,1440,790" fill="none" stroke="rgb(0,210,0)" stroke-width="2"></polyline>
                          <g transform="translate(-20,245)">
                              <text x="170" y="790" fill="#FFFFFF">Ia(A)</text>
                              <text x="170" y="830" fill="#FFFFFF">Q(Mvar)</text>
                          </g>

                          <g transform="translate(20,640)">
                              <num-screen
                                  name="3#"
                                  dir="bottom"
                                  :Ua="Number(this.pageData['10IIIM'][1].state_val)"
                                  :Ub="Number(this.pageData['10IIIM'][2].state_val)"
                                  :Uc="Number(this.pageData['10IIIM'][3].state_val)"
                                  :Uab="Number(this.pageData['10IIIM'][0].state_val)"
                                  :num-tran-y="-30"
                                  :text-width="60"
                                  :num-tran-x="0"
                                  :is-mother="true"
                              ></num-screen>
                          </g>
                          <g transform="translate(860,470)">
                              <num-screen
                                  name="2B#"
                                  dir="bottom"
                                  :Ua="Number(this.pageData['102BM'][1].state_val)"
                                  :Ub="Number(this.pageData['102BM'][2].state_val)"
                                  :Uc="Number(this.pageData['102BM'][3].state_val)"
                                  :Uab="Number(this.pageData['102BM'][0].state_val)"
                                  :num-tran-y="-40"
                                  :text-width="60"
                                  :num-tran-x="-10"
                                  :is-mother="true"
                              ></num-screen>
                          </g>
                          <g transform="translate(1600,470)">
                              <num-screen
                                  name="2A#"
                                  dir="bottom"
                                  :Ua="Number(this.pageData['102AM'][1].state_val)"
                                  :Ub="Number(this.pageData['102AM'][2].state_val)"
                                  :Uc="Number(this.pageData['102AM'][3].state_val)"
                                  :Uab="Number(this.pageData['102AM'][0].state_val)"
                                  :num-tran-y="-40"
                                  :text-width="60"
                                  :num-tran-x="-10"
                                  :is-mother="true"
                              ></num-screen>
                          </g>
                      </g>
                      <!--                  513-->
                      <g>
                          <g transform="translate(200,550)">
                              <num-screen
                                  :has-screen="false"
                                  dir="left"
                                  :P="Number(this.pageData['513'][3].state_val)"
                                  :Q="Number(this.pageData['513'][4].state_val)"
                                  :Ia="Number(this.pageData['513'][2].state_val)"
                              ></num-screen>
                          </g>
                          <line x1="350" y1="600" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :shou-che-data-obj="pageData[513][5]"
                              :rotate="90" :translate-x="390" :translate-y="635" :title-x="-25" :title-y="-10"
                          ></shou-che-svg>
                          <shou-che-svg
                              :shou-che-data-obj="pageData[513][1]"
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :name="pageData[513][1].state_desc"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[513][0].state_val)"
                              :stateDesc="pageData[513][0].state_desc"
                              :rotate="90"
                              :translate-y="634"
                              :translate-x="378"
                              :text-translate-x="-40"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[513][0].is_clear}"
                              :name="pageData[513][0].state_desc"
                          ></rect-svg>
                      </g>
                      <!--464-->
                      <g transform="translate(60,0)">
                          <g transform="translate(180,590)">
                              <num-screen
                                  name="荷景二线"
                                  dir="bottom"
                                  :text-width="70"
                                  :P="Number(this.pageData['464'][2].state_val)"
                                  :Q="Number(this.pageData['464'][3].state_val)"
                                  :num-tran-y="-140"
                                  :num-tran-x="-35"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[464][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[464][0].state_val)"
                              :stateDesc="pageData[464][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[464][0].is_clear}"
                              :name="pageData[464][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[464][1].state_val)"
                              :stateDesc="pageData[464][1].state_desc"
                              :name="'-'+pageData[464][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                  53-7    -->
                      <g transform="translate(140,0)">
                          <g transform="translate(185,590)">
                              <num-screen
                                  name="3# PT"
                                  dir="none"
                                  :text-width="50"
                              ></num-screen>
                          </g>
                          <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="750" x2="350" y2="750" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="750" x2="330" y2="740" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <bi-lei-qi color="rgb(0,210,0)" :translate-x="233" :translate-y="870" :rotate="-90"></bi-lei-qi>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-35" :title-y="22"
                              :shou-che-data-obj="pageData['10IIIM'][4]"
                              :name="pageData['10IIIM'][4].state_desc"
                          ></shou-che-svg>
                          <dian-liu-hu-gan-qi :translate-x="210" :translate-y="820" :rotate="-90" s-width="2" color="rgb(0,210,0)"></dian-liu-hu-gan-qi>
                      </g>
<!--                      463-->
                      <g transform="translate(200,0)">
                          <g transform="translate(180,590)">
                              <num-screen
                                  name="荷景四线"
                                  dir="bottom"
                                  :text-width="70"
                                  :P="Number(this.pageData['463'][2].state_val)"
                                  :Q="Number(this.pageData['463'][3].state_val)"
                                  :num-tran-y="-140"
                                  :num-tran-x="-35"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[463][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[463][0].state_val)"
                              :stateDesc="pageData[463][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[463][0].is_clear}"
                              :name="pageData[463][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[463][1].state_val)"
                              :stateDesc="pageData[463][1].state_desc"
                              :name="'-'+pageData[463][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      461-->
                      <g transform="translate(260,0)">
                          <g transform="translate(194,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['461'][2].state_val)"
                                  :Q="Number(this.pageData['461'][3].state_val)"
                                  :num-tran-y="-140"
                                  :num-tran-x="-50"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[461][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[461][0].state_val)"
                              :stateDesc="pageData[461][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[461][0].is_clear}"
                              :name="pageData[461][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[461][1].state_val)"
                              :stateDesc="pageData[461][1].state_desc"
                              :name="'-'+pageData[461][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      458-->
                      <g transform="translate(320,0)">
                          <g transform="translate(190,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['458'][2].state_val)"
                                  :Q="Number(this.pageData['458'][3].state_val)"
                                  :num-tran-y="-140"
                                  :num-tran-x="-50"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[458][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[458][0].state_val)"
                              :stateDesc="pageData[458][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[458][0].is_clear}"
                              :name="pageData[458][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[458][1].state_val)"
                              :stateDesc="pageData[458][1].state_desc"
                              :name="'-'+pageData[458][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      456-->
                      <g transform="translate(380,0)">
                          <g transform="translate(190,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['456'][2].state_val)"
                                  :Q="Number(this.pageData['456'][3].state_val)"
                                  :num-tran-y="-140"
                                  :num-tran-x="-50"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[456][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[456][0].state_val)"
                              :stateDesc="pageData[456][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[456][0].is_clear}"
                              :name="pageData[456][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[456][1].state_val)"
                              :stateDesc="pageData[456][1].state_desc"
                              :name="'-'+pageData[456][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      454-->
                      <g transform="translate(440,0)">
                          <g transform="translate(190,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['454'][2].state_val)"
                                  :Q="Number(this.pageData['454'][3].state_val)"
                                  :num-tran-y="-140"
                                  :num-tran-x="-50"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[454][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[454][0].state_val)"
                              :stateDesc="pageData[454][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[454][0].is_clear}"
                              :name="pageData[454][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[454][1].state_val)"
                              :stateDesc="pageData[454][1].state_desc"
                              :name="'-'+pageData[454][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      452-->
                      <g transform="translate(500,0)">
                          <g transform="translate(180,590)">
                              <num-screen
                                  name="听澜二线"
                                  dir="bottom"
                                  :text-width="70"
                                  :P="Number(this.pageData['452'][2].state_val)"
                                  :Q="Number(this.pageData['452'][3].state_val)"
                                  :num-tran-y="-140"
                                  :num-tran-x="-35"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[452][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[452][0].state_val)"
                              :stateDesc="pageData[452][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[452][0].is_clear}"
                              :name="pageData[452][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[452][1].state_val)"
                              :stateDesc="pageData[452][1].state_desc"
                              :name="'-'+pageData[452][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      502-->
                      <g>
                          <circle r="4" cx="920" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <circle r="4" cx="980" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <polyline points="920,790,920,680,980,680,980,790" style="fill: none" stroke="rgb(0,210,0)" stroke-width="2"></polyline>
                          <shou-che-svg
                              :shou-che-data-obj="pageData[502][1]"
                              :rotate="90" :translate-x="960" :translate-y="723"
                              :name="pageData[502][1].state_desc"
                              :title-x="-35"
                              :title-y="-20"
                          ></shou-che-svg>
                          <shou-che-svg
                              :shou-che-data-obj="pageData[502][3]"
                              :rotate="90" :translate-x="1020" :translate-y="723"
                              :title-x="-35"
                              :title-y="20"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[502][0].state_val)"
                              :stateDesc="pageData[502][0].state_desc"
                              :rotate="90"
                              :translate-y="725"
                              :translate-x="1008"
                              :text-translate-x="-40"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[502][0].is_clear}"
                              :name="pageData[502][0].state_desc"
                          ></rect-svg>
                          <g transform="translate(790,600)">
                              <num-screen
                              dir="bottom"
                              :text-width="40"
                              :Ia="Number(pageData[502][2].state_val)"
                              name="502"
                              :num-tran-y="-40"
                              :num-tran-x="-20"
                              ></num-screen>
                          </g>
                      </g>
<!--                      451-->
                      <g transform="translate(535,0)">
                          <g transform="translate(180,928)">
                              <num-screen
                                  name="翡翠二线"
                                  dir="bottom"
                                  :text-width="70"
                                  :P="Number(this.pageData['451'][2].state_val)"
                                  :Q="Number(this.pageData['451'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-35"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[451][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[451][0].state_val)"
                                  :stateDesc="pageData[451][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[451][0].is_clear}"
                                  :name="pageData[451][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[451][1].state_val)"
                                  :stateDesc="pageData[451][1].state_desc"
                                  :name="'-'+pageData[451][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      453-->
                      <g transform="translate(470,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['453'][2].state_val)"
                                  :Q="Number(this.pageData['453'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[453][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[453][0].state_val)"
                                  :stateDesc="pageData[453][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[453][0].is_clear}"
                                  :name="pageData[453][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[453][1].state_val)"
                                  :stateDesc="pageData[453][1].state_desc"
                                  :name="'-'+pageData[453][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      455-->
                      <g transform="translate(410,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['455'][2].state_val)"
                                  :Q="Number(this.pageData['455'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[455][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[455][0].state_val)"
                                  :stateDesc="pageData[455][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[455][0].is_clear}"
                                  :name="pageData[455][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[455][1].state_val)"
                                  :stateDesc="pageData[455][1].state_desc"
                                  :name="'-'+pageData[455][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      457-->
                      <g transform="translate(350,0)">
                          <g transform="translate(180,928)">
                              <num-screen
                                  name="荷御一线"
                                  dir="bottom"
                                  :text-width="60"
                                  :P="Number(this.pageData['457'][2].state_val)"
                                  :Q="Number(this.pageData['457'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-37"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[457][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[457][0].state_val)"
                                  :stateDesc="pageData[457][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[457][0].is_clear}"
                                  :name="pageData[457][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[457][1].state_val)"
                                  :stateDesc="pageData[457][1].state_desc"
                                  :name="'-'+pageData[457][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      459-->
                      <g transform="translate(290,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="459"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['459'][2].state_val)"
                                  :Q="Number(this.pageData['459'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[459][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[459][0].state_val)"
                                  :stateDesc="pageData[459][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[459][0].is_clear}"
                                  :name="pageData[459][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[459][1].state_val)"
                                  :stateDesc="pageData[459][1].state_desc"
                                  :name="'-'+pageData[459][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      462-->
                      <g transform="translate(230,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="荷东线"
                                  dir="bottom"
                                  :text-width="50"
                                  :P="Number(this.pageData['462'][2].state_val)"
                                  :Q="Number(this.pageData['462'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[462][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[462][0].state_val)"
                                  :stateDesc="pageData[462][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[462][0].is_clear}"
                                  :name="pageData[462][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[462][1].state_val)"
                                  :stateDesc="pageData[462][1].state_desc"
                                  :name="'-'+pageData[462][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      517-->
                      <g transform="translate(170,0)">
                          <g transform="translate(180,952)">
                              <num-screen
                                  name="3#站用变"
                                  dir="bottom"
                                  :text-width="60"
                                  :P="Number(this.pageData['517'][2].state_val)"
                                  :Q="Number(this.pageData['517'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-37"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[517][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[517][0].state_val)"
                                  :stateDesc="pageData[517][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[517][0].is_clear}"
                                  :name="pageData[517][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[517][1].state_val)"
                                  :stateDesc="pageData[517][1].state_desc"
                                  :name="'-'+pageData[517][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                              <zhanyongbian    :scale=0.6
                                               :translate-x="1454"
                                               :translate-y="878"
                                               :rotate="180"
                                               :swidth="4"
                                               :color_1="'rgb(0,210,0)'"
                                               :zybStyle="2"
                                               color="rgb(0,210,0)"></zhanyongbian>
                          </g>

                      </g>
<!--                      465-->
                      <g transform="translate(30,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['465'][2].state_val)"
                                  :Q="Number(this.pageData['465'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[465][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[465][0].state_val)"
                                  :stateDesc="pageData[465][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[465][0].is_clear}"
                                  :name="pageData[465][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[465][1].state_val)"
                                  :stateDesc="pageData[465][1].state_desc"
                                  :name="'-'+pageData[465][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      450-->
                      <g transform="translate(-30,0)">
                          <g transform="translate(190,980)">
                              <num-screen
                                  name="5#电容器"
                                  dir="bottom"
                                  :text-width="60"
                                  :Q="Number(this.pageData['450'][5].state_val)"
                                  :Ia="Number(this.pageData['450'][4].state_val)"
                                  :num-tran-y="-50"
                                  :num-tran-x="-40"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="350" y1="630" x2="350" y2="650" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>

                              <line x1="330" y1="642" x2="350" y2="642" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="642" x2="330" y2="637" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[450][6]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[450][0].state_val)"
                                  :stateDesc="pageData[450][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[450][0].is_clear}"
                                  :name="pageData[450][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[450][3].state_val)"
                                  :stateDesc="pageData[450][3].state_desc"
                                  :name="'-'+pageData[450][3].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                              <connect-line
                                  :state="Number(pageData['450'][1].state_val)"
                                  :stateDesc="pageData['450'][1].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="326"
                                  :translate-y="676"
                                  :text-rotate="-180"
                                  :text-translate-y="30"
                                  :text-translate-x="-30"
                                  :name="'-'+pageData['450'][1].state_desc.split('-')[1]"></connect-line>
                              <terminal-svg
                                  :state="Number(pageData[450][2].state_val)"
                                  :stateDesc="pageData[450][2].state_desc"
                                  :name="'-'+pageData[450][2].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="590"
                                  :text-rotate="-180"
                                  :text-translate-y="-5"
                                  :text-translate-x="-30"
                                  :rotate="0"
                              ></terminal-svg>
                              <dianrongqi    :scale=0.6
                                               :translate-x="1454"
                                               :translate-y="888"
                                               :rotate="180"
                                               :swidth="4"
                                               :zybStyle="2"
                                               color="rgb(0,210,0)"></dianrongqi>
                          </g>

                      </g>
<!--                      460-->
                      <g transform="translate(-120,0)">
                          <g transform="translate(190,980)">
                              <num-screen
                                  name="6#电容器"
                                  dir="bottom"
                                  :text-width="60"
                                  :Q="Number(this.pageData['460'][5].state_val)"
                                  :Ia="Number(this.pageData['460'][4].state_val)"
                                  :num-tran-y="-50"
                                  :num-tran-x="-40"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="350" y1="630" x2="350" y2="650" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>

                              <line x1="330" y1="642" x2="350" y2="642" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="642" x2="330" y2="637" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[460][6]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[460][0].state_val)"
                                  :stateDesc="pageData[460][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[460][0].is_clear}"
                                  :name="pageData[460][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[460][3].state_val)"
                                  :stateDesc="pageData[460][3].state_desc"
                                  :name="'-'+pageData[460][3].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                              <connect-line
                                  :state="Number(pageData['460'][1].state_val)"
                                  :stateDesc="pageData['460'][1].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="326"
                                  :translate-y="676"
                                  :text-rotate="-180"
                                  :text-translate-y="30"
                                  :text-translate-x="-30"
                                  :name="'-'+pageData['460'][1].state_desc.split('-')[1]"></connect-line>
                              <terminal-svg
                                  :state="Number(pageData[460][2].state_val)"
                                  :stateDesc="pageData[460][2].state_desc"
                                  :name="'-'+pageData[460][2].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="590"
                                  :text-rotate="-180"
                                  :text-translate-y="-5"
                                  :text-translate-x="-30"
                                  :rotate="0"
                              ></terminal-svg>
                              <dianrongqi    :scale=0.6
                                             :translate-x="1454"
                                             :translate-y="888"
                                             :rotate="180"
                                             :swidth="4"
                                             :zybStyle="2"
                                             color="rgb(0,210,0)"></dianrongqi>
                          </g>

                      </g>

<!--                      52B-7-->
                      <g transform="translate(680,0)">
                          <g transform="translate(185,590)">
                              <num-screen
                                  name="2B# PT"
                                  dir="none"
                                  :text-width="50"
                              ></num-screen>
                          </g>
                          <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="750" x2="350" y2="750" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="750" x2="330" y2="740" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <bi-lei-qi color="rgb(0,210,0)" :translate-x="233" :translate-y="870" :rotate="-90"></bi-lei-qi>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-35" :title-y="22"
                              :shou-che-data-obj="pageData['102BM'][4]"
                              :name="pageData['102BM'][4].state_desc"
                          ></shou-che-svg>
                          <dian-liu-hu-gan-qi :translate-x="210" :translate-y="820" :rotate="-90" s-width="2" color="rgb(0,210,0)"></dian-liu-hu-gan-qi>
                      </g>
<!--                      440-->
                      <g transform="translate(700,0)">
                          <g transform="translate(190,980)">
                              <num-screen
                                  name="4#电容器"
                                  dir="bottom"
                                  :text-width="60"
                                  :Q="Number(this.pageData['440'][5].state_val)"
                                  :Ia="Number(this.pageData['440'][4].state_val)"
                                  :num-tran-y="-50"
                                  :num-tran-x="-40"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="350" y1="630" x2="350" y2="650" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>

                              <line x1="330" y1="642" x2="350" y2="642" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="642" x2="330" y2="637" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[440][6]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[440][0].state_val)"
                                  :stateDesc="pageData[440][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[440][0].is_clear}"
                                  :name="pageData[440][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[440][3].state_val)"
                                  :stateDesc="pageData[440][3].state_desc"
                                  :name="'-'+pageData[440][3].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                              <connect-line
                                  :state="Number(pageData['440'][1].state_val)"
                                  :stateDesc="pageData['440'][1].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="326"
                                  :translate-y="676"
                                  :text-rotate="-180"
                                  :text-translate-y="30"
                                  :text-translate-x="-30"
                                  :name="'-'+pageData['440'][1].state_desc.split('-')[1]"></connect-line>
                              <terminal-svg
                                  :state="Number(pageData[440][2].state_val)"
                                  :stateDesc="pageData[440][2].state_desc"
                                  :name="'-'+pageData[440][2].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="590"
                                  :text-rotate="-180"
                                  :text-translate-y="-5"
                                  :text-translate-x="-30"
                                  :rotate="0"
                              ></terminal-svg>
                              <dianrongqi    :scale=0.6
                                             :translate-x="1454"
                                             :translate-y="888"
                                             :rotate="180"
                                             :swidth="4"
                                             :zybStyle="2"
                                             color="rgb(0,210,0)"></dianrongqi>
                          </g>

                      </g>
<!--                      447-->
                      <g transform="translate(780,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['447'][2].state_val)"
                                  :Q="Number(this.pageData['447'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[447][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[447][0].state_val)"
                                  :stateDesc="pageData[447][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[447][0].is_clear}"
                                  :name="pageData[447][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[447][1].state_val)"
                                  :stateDesc="pageData[447][1].state_desc"
                                  :name="'-'+pageData[447][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      445-->
                      <g transform="translate(840,0)">
                          <g transform="translate(180,928)">
                              <num-screen
                                  name="荷御二线"
                                  dir="bottom"
                                  :text-width="60"
                                  :P="Number(this.pageData['445'][2].state_val)"
                                  :Q="Number(this.pageData['445'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-37"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[445][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[445][0].state_val)"
                                  :stateDesc="pageData[445][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[445][0].is_clear}"
                                  :name="pageData[445][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[445][1].state_val)"
                                  :stateDesc="pageData[445][1].state_desc"
                                  :name="'-'+pageData[445][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      443-->
                      <g transform="translate(905,0)">
                          <g transform="translate(180,928)">
                              <num-screen
                                  name="荷景三线"
                                  dir="bottom"
                                  :text-width="60"
                                  :P="Number(this.pageData['443'][2].state_val)"
                                  :Q="Number(this.pageData['443'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-37"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[443][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[443][0].state_val)"
                                  :stateDesc="pageData[443][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[443][0].is_clear}"
                                  :name="pageData[443][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[443][1].state_val)"
                                  :stateDesc="pageData[443][1].state_desc"
                                  :name="'-'+pageData[443][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      441-->
                      <g transform="translate(965,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['441'][2].state_val)"
                                  :Q="Number(this.pageData['441'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[441][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[441][0].state_val)"
                                  :stateDesc="pageData[441][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[441][0].is_clear}"
                                  :name="pageData[441][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[441][1].state_val)"
                                  :stateDesc="pageData[441][1].state_desc"
                                  :name="'-'+pageData[441][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      446-->
                      <g transform="translate(810,0)">
                          <g transform="translate(180,590)">
                              <num-screen
                                  name="荷红线"
                                  dir="bottom"
                                  :text-width="50"
                                  :P="Number(this.pageData['446'][3].state_val)"
                                  :Ia="Number(this.pageData['446'][2].state_val)"
                                  :num-tran-y="-120"
                                  :num-tran-x="-45"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[446][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[446][0].state_val)"
                              :stateDesc="pageData[446][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[446][0].is_clear}"
                              :name="pageData[446][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[446][1].state_val)"
                              :stateDesc="pageData[446][1].state_desc"
                              :name="'-'+pageData[446][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      444-->
                      <g transform="translate(870,0)">
                          <g transform="translate(180,590)">
                              <num-screen
                                  name="荷景一线"
                                  dir="bottom"
                                  :text-width="70"
                                  :P="Number(this.pageData['444'][3].state_val)"
                                  :Ia="Number(this.pageData['444'][2].state_val)"
                                  :num-tran-y="-120"
                                  :num-tran-x="-35"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[444][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[444][0].state_val)"
                              :stateDesc="pageData[444][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[444][0].is_clear}"
                              :name="pageData[444][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[444][1].state_val)"
                              :stateDesc="pageData[444][1].state_desc"
                              :name="'-'+pageData[444][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      442-->
                      <g transform="translate(940,0)">
                          <g transform="translate(190,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['442'][3].state_val)"
                                  :Ia="Number(this.pageData['442'][2].state_val)"
                                  :num-tran-y="-120"
                                  :num-tran-x="-48"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[442][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[442][0].state_val)"
                              :stateDesc="pageData[442][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[442][0].is_clear}"
                              :name="pageData[442][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[442][1].state_val)"
                              :stateDesc="pageData[442][1].state_desc"
                              :name="'-'+pageData[442][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      512B-->
                      <g transform="translate(1000,0)">
                          <g transform="translate(260,500)">
                              <num-screen
                                  :has-screen="false"
                                  dir="left"
                                  :P="Number(this.pageData['512B'][3].state_val)"
                                  :Q="Number(this.pageData['512B'][4].state_val)"
                                  :Ia="Number(this.pageData['512B'][2].state_val)"
                              ></num-screen>
                          </g>
                          <line x1="350" y1="600" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :shou-che-data-obj="pageData['512B'][5]"
                              :rotate="90" :translate-x="390" :translate-y="635" :title-x="-25" :title-y="-10"
                          ></shou-che-svg>
                          <shou-che-svg
                              :shou-che-data-obj="pageData['512B'][1]"
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-35" :title-y="32"
                              :name="pageData['512B'][1].state_desc"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData['512B'][0].state_val)"
                              :stateDesc="pageData['512B'][0].state_desc"
                              :rotate="90"
                              :translate-y="634"
                              :translate-x="378"
                              :text-translate-x="10"
                              :text-translate-y="6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData['512B'][0].is_clear}"
                              :name="pageData['512B'][0].state_desc"
                          ></rect-svg>
                      </g>
<!--                      512a-->
                      <g transform="translate(1100,0)">
                          <g transform="translate(220,500)">
                              <num-screen
                                  :has-screen="false"
                                  :has-unit="false"
                                  dir="left"
                                  :P="Number(this.pageData['512A'][3].state_val)"
                                  :Q="Number(this.pageData['512A'][4].state_val)"
                                  :Ia="Number(this.pageData['512A'][2].state_val)"
                              ></num-screen>
                          </g>
                          <line x1="350" y1="600" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="249" y1="600" x2="350" y2="600" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="300" y1="600" x2="300" y2="500" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :shou-che-data-obj="pageData['512A'][5]"
                              :rotate="90" :translate-x="390" :translate-y="635" :title-x="-25" :title-y="-10"
                          ></shou-che-svg>
                          <shou-che-svg
                              :shou-che-data-obj="pageData['512A'][1]"
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-90" :title-y="12"
                              :name="pageData['512A'][1].state_desc"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData['512A'][0].state_val)"
                              :stateDesc="pageData['512A'][0].state_desc"
                              :rotate="90"
                              :translate-y="634"
                              :translate-x="378"
                              :text-translate-x="-45"
                              :text-translate-y="-16"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData['512A'][0].is_clear}"
                              :name="pageData['512A'][0].state_desc"
                          ></rect-svg>
                      </g>
<!--                      434-->
                      <g transform="translate(1160,0)">
                          <g transform="translate(190,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['434'][3].state_val)"
                                  :Ia="Number(this.pageData['434'][2].state_val)"
                                  :num-tran-y="-120"
                                  :num-tran-x="-48"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[434][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[434][0].state_val)"
                              :stateDesc="pageData[434][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[434][0].is_clear}"
                              :name="pageData[434][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[434][1].state_val)"
                              :stateDesc="pageData[434][1].state_desc"
                              :name="'-'+pageData[434][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      433-->
                      <g transform="translate(1220,0)">
                          <g transform="translate(180,590)">
                              <num-screen
                                  name="听澜一线"
                                  dir="bottom"
                                  :text-width="70"
                                  :P="Number(this.pageData['433'][3].state_val)"
                                  :Ia="Number(this.pageData['433'][2].state_val)"
                                  :num-tran-y="-120"
                                  :num-tran-x="-35"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[433][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[433][0].state_val)"
                              :stateDesc="pageData[433][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[433][0].is_clear}"
                              :name="pageData[433][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[433][1].state_val)"
                              :stateDesc="pageData[433][1].state_desc"
                              :name="'-'+pageData[433][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      435-->
                      <g transform="translate(1290,0)">
                          <g transform="translate(190,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['435'][3].state_val)"
                                  :Ia="Number(this.pageData['435'][2].state_val)"
                                  :num-tran-y="-120"
                                  :num-tran-x="-48"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[435][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[435][0].state_val)"
                              :stateDesc="pageData[435][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[435][0].is_clear}"
                              :name="pageData[435][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[435][1].state_val)"
                              :stateDesc="pageData[435][1].state_desc"
                              :name="'-'+pageData[435][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      437-->
                      <g transform="translate(1350,0)">
                          <g transform="translate(190,590)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['437'][3].state_val)"
                                  :Ia="Number(this.pageData['437'][2].state_val)"
                                  :num-tran-y="-120"
                                  :num-tran-x="-48"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                          <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                              :shou-che-data-obj="pageData[437][4]"
                          ></shou-che-svg>
                          <rect-svg
                              :state="Number(pageData[437][0].state_val)"
                              :stateDesc="pageData[437][0].state_desc"
                              :rotate="90"
                              :translate-y="724"
                              :translate-x="378"
                              :text-translate-x="6"
                              :text-translate-y="-6"
                              :scale="0.7"
                              :isMainPage="true"
                              :itemObj="{is_clear:pageData[437][0].is_clear}"
                              :name="pageData[437][0].state_desc"
                          ></rect-svg>
                          <terminal-svg
                              :state="Number(pageData[437][1].state_val)"
                              :stateDesc="pageData[437][1].state_desc"
                              :name="'-'+pageData[437][1].state_desc.split('-')[1]"
                              :isMainPage="true"
                              :scale=0.7
                              :translate-x="312"
                              :translate-y="633"
                              :text-translate-y="26"
                              :text-translate-x="40"
                              :rotate="0"
                          ></terminal-svg>
                      </g>
<!--                      52A-7-->
                      <g transform="translate(1410,0)">
                          <g transform="translate(185,590)">
                              <num-screen
                                  name="2A# PT"
                                  dir="none"
                                  :text-width="50"
                              ></num-screen>
                          </g>
                          <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="750" x2="350" y2="750" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <line x1="330" y1="750" x2="330" y2="740" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <bi-lei-qi color="rgb(0,210,0)" :translate-x="233" :translate-y="870" :rotate="-90"></bi-lei-qi>
                          <shou-che-svg
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-35" :title-y="22"
                              :shou-che-data-obj="pageData['102AM'][4]"
                              :name="pageData['102AM'][4].state_desc"
                          ></shou-che-svg>
                          <dian-liu-hu-gan-qi :translate-x="210" :translate-y="820" :rotate="-90" s-width="2" color="rgb(0,210,0)"></dian-liu-hu-gan-qi>
                      </g>
<!--                      501-2-->
                      <g transform="translate(1470,0)">
                          <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                          <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                          <shou-che-svg
                              :shou-che-data-obj="pageData[501][0]"
                              :rotate="90" :translate-x="390" :translate-y="725" :title-x="-35" :title-y="22"
                              :name="pageData[501][0].state_desc"
                          ></shou-che-svg>
                      </g>
<!--                      516-->
                      <g transform="translate(1130,0)">
                          <g transform="translate(180,952)">
                              <num-screen
                                  name="2#站用变"
                                  dir="bottom"
                                  :text-width="60"
                                  :P="Number(this.pageData['516'][2].state_val)"
                                  :Q="Number(this.pageData['516'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-37"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[516][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[516][0].state_val)"
                                  :stateDesc="pageData[516][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[516][0].is_clear}"
                                  :name="pageData[516][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[516][1].state_val)"
                                  :stateDesc="pageData[516][1].state_desc"
                                  :name="'-'+pageData[516][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                              <zhanyongbian    :scale=0.6
                                               :translate-x="1454"
                                               :translate-y="878"
                                               :rotate="180"
                                               :swidth="4"
                                               :color_1="'rgb(0,210,0)'"
                                               :zybStyle="2"
                                               color="rgb(0,210,0)"></zhanyongbian>
                          </g>

                      </g>
<!--                      432-->
                      <g transform="translate(1190,0)">
                          <g transform="translate(180,928)">
                              <num-screen
                                  name="翡翠一线"
                                  dir="bottom"
                                  :text-width="60"
                                  :P="Number(this.pageData['432'][2].state_val)"
                                  :Q="Number(this.pageData['432'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-37"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[432][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[432][0].state_val)"
                                  :stateDesc="pageData[432][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[432][0].is_clear}"
                                  :name="pageData[432][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[432][1].state_val)"
                                  :stateDesc="pageData[432][1].state_desc"
                                  :name="'-'+pageData[432][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      434-->
                      <g transform="translate(1250,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['434'][2].state_val)"
                                  :Q="Number(this.pageData['434'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[434][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[434][0].state_val)"
                                  :stateDesc="pageData[434][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[434][0].is_clear}"
                                  :name="pageData[434][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[434][1].state_val)"
                                  :stateDesc="pageData[434][1].state_desc"
                                  :name="'-'+pageData[434][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      436-->
                      <g transform="translate(1310,0)">
                          <g transform="translate(190,928)">
                              <num-screen
                                  name="备用"
                                  dir="bottom"
                                  :text-width="40"
                                  :P="Number(this.pageData['436'][2].state_val)"
                                  :Q="Number(this.pageData['436'][3].state_val)"
                                  :num-tran-y="-60"
                                  :num-tran-x="-47"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <polygon points="345,650,350,640,355,650" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></polygon>
                              <line x1="350" y1="650" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[436][4]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[436][0].state_val)"
                                  :stateDesc="pageData[436][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[436][0].is_clear}"
                                  :name="pageData[436][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[436][1].state_val)"
                                  :stateDesc="pageData[436][1].state_desc"
                                  :name="'-'+pageData[436][1].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                          </g>

                      </g>
<!--                      430-->
                      <g transform="translate(1370,0)">
                          <g transform="translate(190,980)">
                              <num-screen
                                  name="3#电容器"
                                  dir="bottom"
                                  :text-width="60"
                                  :Q="Number(this.pageData['430'][5].state_val)"
                                  :Ia="Number(this.pageData['430'][4].state_val)"
                                  :num-tran-y="-50"
                                  :num-tran-x="-40"
                                  :has-unit="false"
                              ></num-screen>
                          </g>
                          <g transform="rotate(180,350,790)">
                              <line x1="350" y1="680" x2="350" y2="790" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="350" y1="630" x2="350" y2="650" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="350" y2="690" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="690" x2="330" y2="680" stroke="rgb(0,210,0)" stroke-width="2"></line>

                              <line x1="330" y1="642" x2="350" y2="642" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <line x1="330" y1="642" x2="330" y2="637" stroke="rgb(0,210,0)" stroke-width="2"></line>
                              <circle r="4" cx="350" cy="790" fill="rgb(0,210,0)" stroke="rgb(0,210,0)" stroke-width="2"></circle>
                              <shou-che-svg
                                  :rotate="90" :translate-x="390" :translate-y="725" :title-x="-85" :title-y="22"
                                  :shou-che-data-obj="pageData[430][6]"
                              ></shou-che-svg>
                              <rect-svg
                                  :state="Number(pageData[430][0].state_val)"
                                  :stateDesc="pageData[430][0].state_desc"
                                  :rotate="90"
                                  :translate-y="724"
                                  :translate-x="378"
                                  :text-translate-x="66"
                                  :text-translate-y="-32"
                                  :scale="0.7"
                                  :isMainPage="true"
                                  :itemObj="{is_clear:pageData[430][0].is_clear}"
                                  :name="pageData[430][0].state_desc"
                                  :text-rotate="-180"
                              ></rect-svg>
                              <terminal-svg
                                  :state="Number(pageData[430][3].state_val)"
                                  :stateDesc="pageData[430][3].state_desc"
                                  :name="'-'+pageData[430][3].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="633"
                                  :text-rotate="-180"
                                  :text-translate-y="-35"
                                  :text-translate-x="-10"
                                  :rotate="0"
                              ></terminal-svg>
                              <connect-line
                                  :state="Number(pageData['430'][1].state_val)"
                                  :stateDesc="pageData['430'][1].state_desc"
                                  :scale="0.6"
                                  :isMainPage="true"
                                  :rotate="-90"
                                  :translate-x="326"
                                  :translate-y="676"
                                  :text-rotate="-180"
                                  :text-translate-y="30"
                                  :text-translate-x="-30"
                                  :name="'-'+pageData['430'][1].state_desc.split('-')[1]"></connect-line>
                              <terminal-svg
                                  :state="Number(pageData[430][2].state_val)"
                                  :stateDesc="pageData[430][2].state_desc"
                                  :name="'-'+pageData[430][2].state_desc.split('-')[1]"
                                  :isMainPage="true"
                                  :scale=0.7
                                  :translate-x="312"
                                  :translate-y="590"
                                  :text-rotate="-180"
                                  :text-translate-y="-5"
                                  :text-translate-x="-30"
                                  :rotate="0"
                              ></terminal-svg>
                              <dianrongqi    :scale=0.6
                                             :translate-x="1454"
                                             :translate-y="888"
                                             :rotate="180"
                                             :swidth="4"
                                             :zybStyle="2"
                                             color="rgb(0,210,0)"></dianrongqi>
                          </g>

                      </g>
                  </g>

              </g>

          </svg>
      </div>
    </div>
    <el-dialog title="教案初始化" :visible.sync="newJiaoAnDialog" width="40rem" 	custom-class="switchPatrolDialog" :close-on-press-escape="true"
               :close-on-click-modal="true" 	@close="closeJiaoAn">
      <el-form :model="form">
        <el-form-item label="教案名称" label-width="8rem">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工况文件" label-width="8rem">
          <el-select v-model="form.region" placeholder="请选择工况文件">
            <el-option  v-for="(item,index) in form.gKList" :key="index" :label=item.name :value=item.id></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教案描述" label-width="8rem">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.desc">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="newJiaoAn">教案入库</el-button>
        <el-button type="primary" @click="clearNewData">取消</el-button>
      </div>
    </el-dialog>
    <load-jiao-an :loadJiaoAn="loadJiaoAn" @DialogClose="closeJiaoAn"></load-jiao-an>
    <remove-jiao-an :removeJiaoAn="removeJiaoAn" @DialogClose="closeJiaoAn"></remove-jiao-an>
    <start-handle :startHandle="startHandle" @DialogClose="closeHandle" @showAddJiaoAn="showAddJiaoAn"></start-handle>
    <sys-gong-kuang :sysGongKuang="sysGongKuang" @DialogClose="closeJiaoAn"></sys-gong-kuang>
    <el-dialog ref="operateRecordDialogRef" custom-class="operateRecordDialog" :modal="false" :close-on-click-modal="false" v-if="operationRecordsDialogVisible" :visible.sync="operationRecordsDialogVisible" v-dialogDrag:{dialogDrag}="true" width="35%">
      <p slot="title" class="el-dialog__title">操作记录</p>
      <div class="messageAlarmList">
        <el-table :data="operationRecordsData" width="100%" height="250" >
          <el-table-column prop="num" label="序号" width="85" header-align="center" align="center" >
            <template #default="{row}">
              <span :class="{'is-highlight': !!row.isHighlight}">{{row.num}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="操作时间" width="160" header-align="center" align="center" >
            <template #default="{row}">
              <span :class="{'is-highlight': !!row.isHighlight}">{{row.createTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="log_desc" label="操作描述" header-align="center" >
            <template #default="{row}">
              <span :class="{'is-highlight': !!row.isHighlight}">{{row.log_desc}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import MonitorHeader from "@/components/MonitorHeader/MonitorHeader.vue";
import SysGongKuang from "@/components/JA/sysGongKuang.vue";
import StartHandle from "@/components/JA/startHandle.vue";
import RemoveJiaoAn from "@/components/JA/removeJiaoAn.vue";
import LoadJiaoAn from "@/components/JA/loadJiaoAn.vue";
import { getOperateRecord, saveJAn, submitOperateRecord } from "@/api/api";
import { EventBus } from "@/tools/bus";
import NumScreen from "@/components/controls/numScreen.vue";
import BiLeiQi from "@/components/controls/biLeiQi.vue";
import XianQuan from "@/components/controls/xianquan.vue";
import { wsSend } from "@/tools/sendMessage";
import TerminalSvg from "@/components/controls/terminal-svg.vue";
import ConnectLine from "@/components/controls/connect-line.vue";
import RectSvg from "@/components/controls/rect-svg.vue";
import MainBus from "@/components/controls/mainBus.vue";
import DianLiuHuGanQi from "@/components/controls/dianLiuHuGanQi.vue";
import Jiedi from "@/components/controls/jiedi.vue";
import ShouCheSvg from "@/components/controls/shou-che-svg.vue";
import Zhanyongbian from "@/components/controls/zhanyongbian.vue";
import FourCircle from "@/components/controls/fourCircle.vue";
import DianKangQi from "@/components/controls/dianKangQi.vue";
import TwoCircle from "@/components/controls/twoCricle.vue";
import Dianrongqi from "@/components/controls/dianrongqi.vue";
import TwoTriangle from "@/components/controls/twoTriangle.vue";


export default {
  name: "mainPage",
  components: {
      TwoTriangle,
      Dianrongqi,
      TwoCircle,
    DianKangQi,
    FourCircle,
    Zhanyongbian,
    ShouCheSvg,
    Jiedi,
    DianLiuHuGanQi,
    MainBus,
    RectSvg,
    ConnectLine,
    TerminalSvg,
    XianQuan,
    BiLeiQi,
    NumScreen,
    LoadJiaoAn,
    RemoveJiaoAn,
    StartHandle,
    SysGongKuang,
    MonitorHeader,
    ScaleBox
  },
  data() {
    return {
      operationRecordsDialogVisible:false,
      operationRecordsData:[],
      jiaoAnValue: [],
      pageData:null,
        jiaoAnOptions_1:[],
      jiaoAnOptions: [{
        value: '生成教案',
        label: '生成教案',

      }, {
        value: '加载教案',
        label: '加载教案',
      },
        {
          value: '删除教案',
          label: '删除教案',
        },{
          value: '录制教案',
          label: '录制教案',
          children: [{
            value: '开始记录操作到教案完全记录',
            label: '开始记录操作到教案完全记录'
          }, {
            value: '结束记录操作到教案完全结束',
            label: '结束记录操作到教案完全结束'
          },]
        }],
      form: {
        name: '',
        gKList: [],
        region:'',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      gongkuangValue:[],
      newJiaoAnDialog: false,
      gongKuangOptions: [{
        value: '系统工况',
        label: '系统工况',
      }],
      loadJiaoAn:false,
      //删除教案
      removeJiaoAn:false,
      //
      startHandle:false,
      //工况
      sysGongKuang:false,
    }
  },
  watch: {
    watch: {
      newJiaoAnDialog(val) {
        if (val){
         this.getGkList();
        }
      }
    }
  },
  created() {
    EventBus.$on('ws-connected', this.handleWSConnected)
    if (this.$store.state.ws && this.$store.state.ws.readyState === WebSocket.OPEN) {
      this.handleWSConnected()
    }
  },
  methods: {
    handleWSConnected() {
      if (this.$store.state.wsHandled) return
      this.$store.commit('setWsHandled',true)
      wsSend({ cmd: 'getMonitorMainPage' })
    },
    getOperateRecordList() {
      getOperateRecord({}).then(res => {
        if (res.data){
          const data = JSON.parse(JSON.stringify(res.data.map(o => {
            o.isHighlight = false;
            return o;
          })));
          if (this.operationRecordsData.length && this.operationRecordsData.length !== data?.length) {
            data[0].isHighlight = true;
          }
          this.operationRecordsData = data;
        }

      });
    },
    operationRecords() {
      this.operationRecordsDialogVisible = true
      this.operationRecordsData = [];
      this.getOperateRecordList();
      this.$nextTick(() => {
        this.$refs.operateRecordDialogRef.$el.style.pointerEvents = 'none';
      });
    },
    clearAll(){
      wsSend({ "cmd": "switchAllClear" })
      submitOperateRecord({ log_desc: '全站清闪' },false)
    },
    alertLog(){
      wsSend({ "cmd": "openAlertWindow" })
    },
    startDrag(e) {
      e.preventDefault();
      const el = this.$refs.page;
      this.isDragging = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.scrollLeft = el.scrollLeft;
      this.scrollTop = el.scrollTop;

      window.addEventListener("mousemove", this.onDrag);
      window.addEventListener("mouseup", this.stopDrag);
    },
    onDrag(e) {
      if (!this.isDragging) return;
      e.preventDefault();

      const dx = e.clientX - this.startX;
      const dy = e.clientY - this.startY;

      cancelAnimationFrame(this.dragAnimationFrame);

      this.dragAnimationFrame = requestAnimationFrame(() => {
        const el = this.$refs.page;
        if (!el) return;

        el.scrollLeft = this.scrollLeft - dx;
        el.scrollTop = this.scrollTop - dy;
      });
    },
    stopDrag() {
      this.isDragging = false;
      cancelAnimationFrame(this.dragAnimationFrame);
      window.removeEventListener("mousemove", this.onDrag);
      window.removeEventListener("mouseup", this.stopDrag);
    },
    async newJiaoAn(){
      if (this.form.name===''){
        this.$message.error('请输入名称')
        return
      }
      if (this.form.region===''){
        this.$message.error('请选择工况')
        return
      }
      if (this.form.desc===''){
        this.$message.error('请输入描述')
        return
      }
      const params = {
        gkId:this.form.region,
        name: this.form.name,
        teaDesc: this.form.desc,
      }
      const res=await saveJAn(params);
      if (res.data.code===200){
        this.$message.success('添加成功')
        this.clearNewData();
      }else{
        this.$message.error('添加失败请检查网路设置')
      }
    },
    closeJiaoAn(){
      this.gongkuangValue=undefined;
      this.jiaoAnValue=undefined;
      this.loadJiaoAn=false
      this.removeJiaoAn=false
      this.sysGongKuang=false
      this.newTicket=false
    },
    closeHandle(){
      this.gongkuangValue=undefined;
      this.jiaoAnValue=undefined;
      this.startHandle=false
    },
    clearNewData(){
      this.form = {
        name: '',
        gKList: [],
        region:'',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      };
      this.newJiaoAnDialog = false
    },
    showAddJiaoAn(){
      this.newJiaoAnDialog = true
    },
    handleChange(value) {
      if (value){
        this.jiaoAnValue=null
        this.gongkuangValue=null
        const currentSelect = value[value.length - 1]
        switch (currentSelect){
          case '生成教案':
            this.newJiaoAnDialog = true
            break
          case '加载教案':
            this.loadJiaoAn = true
            break
          case '删除教案':
            this.removeJiaoAn = true
            break
          case '开始记录操作到教案完全记录':
            this.startHandle = true
            break
          case '系统工况':
            this.sysGongKuang = true
            break
        }
      }
    },
    messageHandle(data){
      if (data.cmd==='switchAllClear'){
        this.$message.success('全站清闪成功')
        wsSend({ "cmd": "getMonitorMainPage" })
      }
      if (data.cmd==='getMonitorMainPage'){
         this.pageData = JSON.parse(JSON.stringify(data.data))
        console.log(JSON.parse(JSON.stringify(this.pageData)),'主图数据')
      }
    },
      goMap(){
          this.$router.push({
              path: '/map'
          })
      },
  },
  mounted() {
      if(['teacher','admin'].includes(this.$store.state.user?.userRole)){
          this.jiaoAnOptions_1=JSON.parse(JSON.stringify(this.jiaoAnOptions))
      }else{
          this.jiaoAnOptions_1=this.jiaoAnOptions.filter(o=>o.value==='加载教案')
      }
    EventBus.$on("ws-message",this.messageHandle)
    this.$store.commit('setMainPage',true)
  },
    beforeCreate() {
        this.$store.commit('setWsHandled',false)
    },
    beforeDestroy() {
    EventBus.$off("ws-message",this.messageHandle)
    EventBus.$off('ws-connected')
    this.$store.commit('setMainPage',false)
  },
};
</script>
